<template>
  <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :before-close="cancel">
    <el-form ref="form" :model="form" :rules="rules" label-width="140px" size="mini">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="源产品" prop="oldAppcode">
            <el-select
              v-model="form.oldAppcode"
              @change="_oldProductChange"
              placeholder="源产品"
              filterable
              clearable
              style="width: 100%">
              <el-option
                v-for="(item, index) in productList"
                :key="item + index"
                :label="item.name"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="源渠道" prop="oldChannel">
            <el-select v-model="form.oldChannel" placeholder="源渠道" filterable clearable style="width: 100%">
              <el-option
                v-for="(item, index) in oldChannelList"
                :key="item + index"
                :label="item.name"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="新产品" prop="newAppcode">
            <el-select
              v-model="form.newAppcode"
              placeholder="新产品"
              filterable
              clearable
              style="width: 100%">
              <el-option
                v-for="(item, index) in newProductList"
                :key="item + index"
                :label="item.name"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="新渠道" prop="newChannel">
            <el-select v-model="form.newChannel" placeholder="新渠道" filterable clearable style="width: 100%">
              <el-option
                v-for="(item, index) in dict.type.sys_channel"
                :key="item + index"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="新产品版本号" prop="version">
            <el-input v-model="form.version" placeholder="请输入新产品版本号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="新产品微信appid" prop="wxappid">
            <el-input v-model="form.wxappid" placeholder="请输入新产品微信appid" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="新产品微信secret" prop="wxappsecret">
            <el-input v-model="form.wxappsecret" placeholder="请输入新产品微信secret" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="复制配置" prop="checkeds">
            <el-checkbox-group v-model="form.checkeds">
              <el-checkbox v-for="(item, index) in dict.type.COPY_OPTION" :key="item + index" :label="item.value">{{item.label}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import commonMinxis from './common'
import { copyConfig, getAllAppList } from '@/api/configs/appConfig.js'
export default {
  dicts: ['COPY_OPTION', 'sys_channel'],
  mixins: [commonMinxis],
  props: {
    title: {
      default: '复制配置',
      type: String
    },
    open: {
      default: false,
      type: Boolean
    }
  },
  data () {
    return {
      form: {
        oldAppcode: '',
        oldChannel: '',
        newAppcode: '',
        newChannel: '',
        version: '',
        wxappid: '',
        wxappsecret: '',
        checkeds: []
      },
      rules: {
        oldAppcode: [{ required: true, message: '请选择源产品', trigger: 'change' }],
        oldChannel: [{ required: true, message: '请选择源渠道', trigger: 'change' }],
        newAppcode: [{ required: true, message: '请选择新产品', trigger: 'change' }],
        newChannel: [{ required: true, message: '请选择新渠道', trigger: 'change' }],
        version: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
        checkeds: [{ required: true, message: '请选择需要复制的配置', trigger: 'change' }],
      },
      newProductList: [],
      productList: [],
      oldChannelList: [],
      configListItems: [{name: '应用内', value: 1}],
    }
  },
  created () {
    this._getNewProductList()
  },
  methods: {
    submitForm () {
      let vm = this
      vm.$refs["form"].validate(valid => {
        if (valid) {
          let { checkeds, ...params } = vm.form
          params.copyOptions = checkeds.join(',')
          copyConfig(params).then(response => {
            if (response.code === 200) {
              vm.$modal.msgSuccess('操作成功');
              vm._resetForm()
              vm.cancel()
            } else {
              vm.$modal.msgError(response.msg);
            }
          })
        }
      });
    },
    _getNewProductList () {
      getAllAppList({}).then(response => {
        if (response.code === 200) {
          this.newProductList = response.data.map(item => {
            return {
              name: item.productname,
              value: item.appcode
            };
          });
        } else {
          this.$modal.msgError(response.msg);
        }
      })
    },
    _oldProductChange () {
      this.form.oldChannel = '';
      let vm = this
      let currItem = vm.productList.filter(item => {
        return item.value === vm.form['oldAppcode']
      })[0]
      vm['oldChannelList'] = currItem.channelList.map(item => {
        return {
          name: item.channel,
          value: item.channel,
          innerList: item.innerList,
          outList: item.outList
        }
      })
    },
    _resetForm () {
      let vm = this;
      vm.form = {
        oldAppcode: '',
        oldChannel: '',
        newAppcode: '',
        newChannel: '',
        version: '',
        wxappid: '',
        wxappsecret: '',
        checkeds: []
      };
    },
    cancel () {
      this.$emit('update:open', false)
    }
  }
}
</script>
